<template>
  <div class="help-category-tree">
    <ul v-if="data.length">
      <li
        v-for="(item, i) in data"
        v-show="expandFlag"
        :key="i"
        @click.stop="handleClick(item,i)"
      >
        <template>
          <div
            class="item"
            :class="{'is-parent':item.childrenCategorys && item.childrenCategorys.length}"
          >
            <div class="name" :class="{'active':value == item[valueKey]}">
              {{ item[labelKey] }}
            </div>
            <!-- 展开的图标 -->
            <span
              v-if="item.childrenCategorys && item.childrenCategorys.length"
              class="expandIcon"
              @click.stop="expandItem(item, i)"
            >
              <svg-icon v-if="expandArr.includes(i)" icon-class="xiangshang" />
              <svg-icon v-else icon-class="xiangxia" />
            </span>
          </div>
          <list-menu
            v-if="item.childrenCategorys && item.childrenCategorys.length"
            :data="item.childrenCategorys"
            :value-key="valueKey"
            :label-key="labelKey"
            :value="value"
            :expand-flag="expandArr.includes(i)"
            v-on="$listeners"
            @input="input"
            @change="setExpand"
          />
        </template>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  // 组件名必写
  name: 'ListMenu',
  props: {
    // 选中的值的属性名，必传
    valueKey: String,
    // 在页面要展示的选项属性名，必传
    labelKey: String,
    // 选中的值，必传
    value: String,
    // 总数据，必传
    data: Array,
    expandFlag: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 当前级组件已展开的项
      expandArr: []
    }
  },
  created() {
    if (this.value) {
      this.checkSelected(this.value)
    }
  },
  methods: {
    // 子组件逐级传递选中项
    input(item) {
      this.$emit('input', item)
    },
    // 展开
    expandItem(item, i) {
      if (item.childrenCategorys && item.childrenCategorys.length) {
        const index = this.expandArr.indexOf(i)
        if (index > -1) {
          this.expandArr.splice(index, 1)
        } else {
          this.expandArr.push(i)
        }
      }
    },
    handleClick(item, i) {
      if (item.childrenCategorys && item.childrenCategorys.length) {
        const index = this.expandArr.indexOf(i)
        if (index > -1) {
          this.expandArr.splice(index, 1)
        } else {
          this.expandArr.push(i)
        }
        return
      }
      this.$emit('input', item[this.valueKey])
      this.$emit('clickItem', item[this.valueKey])
    },
    checkSelected(id) {
      const index = this.data.findIndex(v => v[this.valueKey] === id)
      if (index > -1) {
        if (this.data[index].parentId) {
          this.$emit('change', this.data[index].parentId)
        }
      }
    },
    setExpand(id) {
      const index = this.data.findIndex(v => v[this.valueKey] === id)
      if (index > -1) {
        this.expandArr.push(index)
        if (this.data[index].parentId) {
          this.$emit('change', this.data[index].parentId)
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.help-category-tree{
  color: #333;
  ul{
    padding:0;
    margin:0;
    width: 100%;
    li{
      padding-left: 10px;
      font-size: 16px;
      // font-weight: bold;
      background: #fff;
      margin-bottom: 10px;
      overflow: hidden;
      .item{
        width: 100%;
        padding: 10px 10px 10px 0;
        box-sizing:border-box;
        display: flex;
        align-items: center;
        white-space: nowrap;
        &.is-parent{
          font-weight:bold;
        }
        .name{
          line-height: 1;
          flex: 1;
        }
        .expandIcon{
          margin-left:10px;
          width: 20px;
          height: 20px;
          background: #F5F6F7;
          position:relative;
          .svg-icon{
            font-size: 20px;
          }
        }
      }
      li{
        font-size: 14px;
        margin-bottom:0;
        // font-weight: bold;
        li{
          font-size: 12px;
          font-weight:normal;
        }
      }
    }
  }
  .active{
    color: #00C8B4 !important;
  }
}
</style>
